import React, { ChangeEvent, CSSProperties } from 'react'
const PREFIX = 'GZWINPUT'
interface Props {
  prefix?: React.ReactElement
  suffix?: React.ReactElement
  disabled?: boolean
  value?: string
  onChange?: (value: ChangeEvent<HTMLInputElement>) => void
  placeholder?: string
  style?: CSSProperties
}
class Input extends React.Component<Props, any> {
  constructor(props: Props) {
    super(props)
  }
  getClassName(str: string = '') {
    return `${PREFIX}${str}`
  }
  render() {
    const { prefix, suffix, placeholder, value, onChange, style } = this.props
    return (<div className={this.getClassName()} style={style || {}}>
      { prefix && prefix }
      <input value={value} placeholder={placeholder} onChange={(e) => {
        typeof onChange === 'function' && onChange(e)
      }}></input>
      { suffix && suffix }
    </div>)
  }
}

export default Input
